<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">
    <h3>当前登录人：{{user.username}},手机号：{{user.phone}},角色是：{{user.role}} <el-button type="text" @click="logout">退出</el-button></h3>
    <el-input v-model="query.name" style="width:200px" placeholder="商品名称模糊查询" clearable></el-input>
    <el-select v-model="query.cid" placeholder="请选择分类" clearable>
        <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
        </el-option>
    </el-select>

    <el-button v-if="user.role=='管理员'" @click="goAdd">添加</el-button>
    <el-button v-if="user.role=='管理员'" @click="exportData">导出</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="序号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="商品名称">
        </el-table-column>
        <el-table-column
                prop="cname"
                label="分类">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格">
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态">
        </el-table-column>
        <el-table-column
                prop="num"
                label="库存">
        </el-table-column>
        <el-table-column
                prop="tz"
                label="特征">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="delOne2(scope.row)" size="mini" v-if="user.role=='管理员'">删除-显示按钮</el-button>
                <el-button @click="delOne(scope.row.id)" size="mini" v-if="user.role=='管理员'&&scope.row.state=='下架'">删除-不显示按钮</el-button>
                <el-button @click="changeState(scope.row.id,'上架')" size="mini" v-if="user.role=='管理员'&&scope.row.state=='下架'">上架</el-button>
                <el-button @click="changeState(scope.row.id,'下架')" size="mini" v-if="user.role=='管理员'&&scope.row.state=='上架'">下架</el-button>
                <el-button @click="addnum(scope.row)" size="mini" v-if="user.role=='管理员'">补库存</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageNum"
            :page-sizes="[1, 2, 3, 400]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" :label-width="formLabelWidth">
                <el-input v-model="form.num" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="商品特征" :label-width="formLabelWidth">
                <el-checkbox-group v-model="tzArr">
                    <el-checkbox label="好吃"></el-checkbox>
                    <el-checkbox label="好用"></el-checkbox>
                    <el-checkbox label="好玩"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="商品分类" :label-width="formLabelWidth">
                <el-select v-model="form.cid" placeholder="请选择分类" clearable>
                    <el-option
                            v-for="item in categoryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addGoods">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{},
            tableData:[],
            total:"",
            query:{
                name:"",
                cid:"",
                pageNum:1,
                pageSize:2
            },
            categoryList:[],
            dialogFormVisible: false,
            form: {
                name: '',
                cid: '',
                price: '',
                tz: '',
                state: false,
                num: "",
            },
            tzArr:[],
            formLabelWidth: '120px'
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.findPage();
                }
            }
        },
        methods:{
            addnum(row){
                var obj = {
                    id:row.id,
                    num:row.num+1
                }
                axios.post('/goods/update',obj).then(res=>{
                    this.$message.success("补库存成功")
                    this.findPage()
                })

            },
            changeState(id,state){

                var num = state=="上架"?10:0
                var obj = {id:id,state,num}
                axios.post('/goods/update',obj).then(res=>{
                    this.$message.success(state+"成功")
                    this.findPage()
                })

            },
            delOne2(row){
                if(row.state=="上架"){
                    this.$message.error("上架的商品不能删除")
                }else{
                    this.delOne(row.id);
                }
            },
            delOne(id){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/goods/deleteOne?id="+id).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.findPage()
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            exportData(){
                location.href = "/goods/exportData"
            },
            goAdd(){
                this.dialogFormVisible = true;
            },
            addGoods(){
                this.form.state = "上架"
                this.form.tz = this.tzArr.join(",");
                axios.post("/goods/add",this.form).then(res=>{
                    var r = res.data;
                    if(r.code==0){
                        this.$message.success("添加成功")
                        this.form =  {
                            name: '',
                            cid: '',
                            price: '',
                            tz: '',
                            state: false,
                            num: "",
                        }
                        this.tzArr  =[];
                        this.dialogFormVisible = false
                        this.findPage()
                    }else{
                        this.$message.error(r.message)
                    }
                })


            },
            logout(){
                this.$message.success("退出成功")
                localStorage.removeItem("currentUser")
                setTimeout(()=>{
                    location.href = "login.html"
                },2000)
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.pageNum = val
            },
            findPage(){
                axios.post(`/goods/findPage?page=${this.query.pageNum}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            findCategoryList(){
                axios.post("/category/findAll").then(res=>{
                    this.categoryList = res.data;
                })

            }

        },
        created(){

            var userStr = localStorage.getItem("currentUser")
            if(userStr){
                this.user = JSON.parse(userStr)
                this.findPage()
                this.findCategoryList();
            }else{
                this.$message.error("你还没有登录")
                setTimeout(()=>{
                    location.href = "login.html"
                },2000)
            }

        }
    })
</script>

</body>
</html>
